<script setup lang="ts">
const props = defineProps({
  type: {
    type: String,
    default: "primary",
  },
  text: {
    type: String,
    default: "",
  },
});
// console.log('接收参数', props)
</script>
<template>
  <view :class="`${type} flex icon-box text-sm`">
    <image :src="`../../static/images/${type}.png`" mode="scaleToFill" />
    <text>{{ text }}</text>
  </view>
</template>
<style lang="scss">
.primary {
  color: #01a1fe;
}

.danger {
  color: #e72d11;
}

.warnning {
  color: #dfc39e;
}
.black {
  color: #000000;
}

.icon-box {
  // background-color: #ffffff;
  border-radius: 50%;
  width: 88rpx;
  height: 77rpx;
  position: relative;

  image {
    width: 100%;
    height: 100%;
  }

  text {
    // color: #01A1FE;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
  }
}
</style>